<template>
  <div class="app-container">
    <div class="filter-container" style="float:right;">
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="addInfrared"> 红外监控设备 </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-plus" @click="addDoor"> 门禁监控设备 </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="addSwitch"> 源控开关设备 </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-plus" @click="addAxis"> 运动轴设备 </el-button>
      <el-button class="filter-item" type="success" icon="el-icon-plus" @click="addControl"> 检测控制设备 </el-button>
      <!-- <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="addCircle"> 圆盘设备 </el-button> -->
    </div>

    <el-table
      :key="tableKey"
      v-loading="deviceListLoading"
      :data="deviceList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :default-sort="{prop: 'id', order: 'ascending'}"
    >
      <el-table-column label="ID" type="index" align="center" />
      <el-table-column label="图标" width="150px" align="center" prop="model">
        <template slot-scope="{row}">
          <svg-icon v-if="row.tag=='infrared'" icon-class="peoples" style="font-size:50px;color:#1296db;" />
          <svg-icon v-if="row.tag=='door'" icon-class="door" style="font-size:50px;color:#1296db;" />
          <svg-icon v-if="row.tag=='switch'" icon-class="switch" style="font-size:50px;color:#1296db;" />
          <svg-icon v-if="row.tag=='axis'" icon-class="axis" style="font-size:50px;color:#1296db;" />
          <svg-icon v-if="row.tag=='circle'" icon-class="circle" style="font-size:50px;color:#1296db;" />
          <svg-icon v-if="row.tag=='control'" icon-class="control" style="font-size:50px;color:#1296db;" />
        </template>
      </el-table-column>
      <!-- <el-table-column label="状态" align="center" prop="online">
        <template slot-scope="{row}">
          <el-tag :type="row.online | onlineTypeFilter">{{ row.online | onlineFilter }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="名称" align="center" prop="name">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="位置" align="center" prop="position">
        <template slot-scope="{row}">
          <span>{{ row.position }}</span>
        </template>
      </el-table-column>
      <el-table-column label="SN" align="center" prop="sn">
        <template slot-scope="{row}">
          <span>{{ row.sn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="型号" prop="model">
        <template slot-scope="{row}">
          <span>{{ row.model }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订阅" min-width="100px" prop="model">
        <template slot-scope="{row}">
          <span>{{ row.sub }}</span>
        </template>
      </el-table-column>
      <el-table-column label="推送" min-width="100px" prop="model">
        <template slot-scope="{row}">
          <span>{{ row.pub }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="连锁" min-width="100px" prop="model">
        <template slot-scope="{row}">
          <el-checkbox v-if="row.lock===1" label="连锁" checked @change="lockChange(row)" />
          <el-checkbox v-if="row.lock===0" label="连锁" @change="lockChange(row)" />
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="400" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="primary" icon="el-icon-setting" @click="toSet(row,$index)"> 设置 </el-button>
          <el-button size="mini" type="success" icon="el-icon-upload" @click="toUpdate(row,$index)"> 升级 </el-button>
          <el-button size="mini" type="default" icon="el-icon-more" @click="toLog(row,$index)"> 记录 </el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="onDelete(row,$index)"> 删除 </el-button>
          <!-- <el-button size="mini" type="warning" @click="toInfo(row)"> 编辑 </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加设备" :visible.sync="dialogAddFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="位置" :label-width="formLabelWidth">
          <el-input v-model="addForm.position" autocomplete="off" />
        </el-form-item>
        <el-form-item label="SN" :label-width="formLabelWidth">
          <el-input v-model="addForm.sn" autocomplete="off" />
        </el-form-item>
        <el-form-item label="订阅" :label-width="formLabelWidth">
          <el-input v-model="addForm.sub" autocomplete="off" />
        </el-form-item>
        <el-form-item label="推送" :label-width="formLabelWidth">
          <el-input v-model="addForm.pub" autocomplete="off" />
        </el-form-item>
        <el-form-item label="型号" :label-width="formLabelWidth">
          <el-input v-model="addForm.model" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddConfirm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getDevices, addDevice, deleteDevice, editDevice } from '@/api/device'
import waves from '@/directive/waves' // waves directive

export default {
  name: 'Device',
  directives: { waves },
  filters: {
    typeFilter(status) {
      if (status === 1) {
        return 'success'
      } else {
        return 'danger'
      }
    },
    statusFilter(status) {
      if (status === 1) {
        return '正常'
      } else {
        return '异常'
      }
    },
    onlineTypeFilter(status) {
      if (status === 1) {
        return 'success'
      } else {
        return 'danger'
      }
    },
    onlineFilter(status) {
      if (status === 1) {
        return '在线'
      } else {
        return '离线'
      }
    }
  },
  data() {
    return {
      value: true,
      tableKey: 0,
      deviceList: [],
      deviceListLoading: true,
      showList: [],
      total: 10,
      listQuery: {
        status: 1
      },
      // 按照型号分类
      filterModel: '',
      models: [],
      formLabelWidth: '100px',
      // 编辑设备相关变量
      editForm: { value: {}},
      dialogFormVisible: false,
      // 添加设备相关变量
      addForm: { value: {}},
      dialogAddFormVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.deviceListLoading = true
      getDevices(this.listQuery).then(response => {
        this.deviceListLoading = false
        var data = response.data
        if (data === null) {
          this.autos = []
        } else {
          for (var i = 0; i < data.length; i++) {
            data[i].value = JSON.parse(data[i].value)
          }
          data.sort(function(a, b) {
            return a.id - b.id
          })
          console.log(data)
          this.deviceList = data
        }
      })
    },

    lockChange(row) {
      console.log(row.lock)
      if (row.lock === 1) {
        row.lock = 0
      } else {
        row.lock = 1
      }
      console.log(row.lock)
      editDevice(row).then(response => {
        this.fetchData()
      })
    },

    // 添加设备
    addDoor() {
      this.$router.push({ path: '/device/door/add' })
    },
    addSwitch() {
      this.$router.push({ path: '/device/switch/add' })
    },
    addInfrared() {
      this.$router.push({ path: '/device/infrared/add' })
    },
    addAxis() {
      this.$router.push({ path: '/device/axis/add' })
    },
    addCircle() {
      this.$router.push({ path: '/device/circle/add' })
    },
    addControl() {
      this.$router.push({ path: '/device/control/add' })
    },

    toSet(device) {
      console.log('跳转到设置页面~')
      console.log('/device/' + device.tag + '/set')
      this.$router.push({
        path: '/device/' + device.tag + '/set',
        query: device
      })
    },

    toUpdate(device) {
      console.log('跳转到升级页面~')
      console.log('/device/' + device.tag + '/update')
      this.$router.push({
        path: '/device/' + device.tag + '/update',
        query: device
      })
    },

    toLog(device) {
      this.$router.push({
        path: '/device/' + device.tag + '/log',
        query: device
      })
    },

    toInfo(device) {
      this.$router.push({
        path: '/device/' + device.tag,
        query: device
      })
    },

    onAddConfirm() {
      this.addForm.online = 0
      this.addForm.status = 0
      this.addForm.lock = 1
      this.addForm.value = JSON.stringify(this.addForm.value)
      addDevice(this.addForm).then(response => {
        this.$message({ type: 'success', message: response.message })
        this.fetchData()
        this.dialogAddFormVisible = false
      })
    },

    onDelete(device) {
      this.$confirm('此操作将永久删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDevice(device.id).then(response => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.fetchData()
          } else this.$message(response.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style lang="scss" scoped>

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

</style>
